import React, { Component } from 'react'
import './styles.css'
import http from '../uil/http'
import u1 from './images/u1.jpg'
import u3 from './images/u3.jpg'
import u4 from './images/u4.jpg'
import u7 from './images/u7.png'
export default class Login extends Component {
  constructor(props){
    super(props)
    this.state={
      username:'',
      password:''}
  }
  componentWillMount(){
    document.title = '登录 -大连商品交易所';  
  }
  // 当用户名发生改变
  onInputChange(e){
    let inputValue  = e.target.value,
        inputName   = e.target.name;
    this.setState({
        [inputName] : inputValue
    });
  }
  //如果是使用回车登录 keycode==13 
  onInputKeyUp(e){
    if(e.keyCode === 13){
        this.onSubmit();
    }
  }
  //当用户提交表单
  onSubmit(){
    let loginInfo = {
            username : this.state.username,
            password : this.state.password
        },
        checkResult = _user.checkLoginInfo(loginInfo);
    // 验证通过
    if(checkResult.status){
        _user.login(loginInfo).then((res) => {
            _mm.setStorage('userInfo', res);
            this.props.history.push(this.state.redirect);
        }, (errMsg) => {
            _mm.errorTips(errMsg);
        });
    }
    // 验证不通过
    else{
        _mm.errorTips(checkResult.msg);
    }
        
}
  



  render() {
    return (

      <div id="base" className="">
        <div id="u0" className="ax_default menu_item">
          <div id="u0_div" className=""></div>
        </div>

        <div id="u1" className="ax_default image">
          <img id="u1_img" className="img " src={u1} />
        </div>
        <div id="u2" className="ax_default" data-left="639" data-top="191" data-width="253" data-height="157">

          <div id="u3" className="ax_default image">
            <img id="u3_img" className="img " src={u3} />
          </div>


          <div id="u4" className="ax_default image">
            <img id="u4_img" className="img " src={u4} />
          </div>


          <div id="u5" className="ax_default text_field">
            <input 
              id="u5_input" type="password" 
              placeholder="密&nbsp; &nbsp; 码" 
              onKeyUp={e => this.onInputKeyUp(e)}
              onChange={e => this.onInputChange(e)}/>
          </div>

          <div id="u6" className="ax_default text_field">
            <input 
              id="u6_input" type="text" 
              placeholder="请输入用户名"  
              onKeyUp={e => this.onInputKeyUp(e)}
              onChange={e => this.onInputChange(e)}/>
          </div>


          <div id="u7" className="ax_default icon">
            <img id="u7_img" className="img " src={u7}
              onClick={e => {this.onSubmit(e)}}
            />
          </div>

          <div id="u8" className="ax_default heading_2">
            <div id="u8_div" className=""></div>
            <div id="u8_text" className="text ">
              <p><span>用户登录</span></p>
            </div>
          </div>
        </div>
      </div>
    )
  }

}